<template>
	<view class="app">
		<view class="header">
			<image src="../../static/img/向右1.png" mode="" style="transform: rotate(180deg);width: 38rpx;height: 38rpx;"
				@click="back">
			</image>
			<input type="search" name="search" id="search" placeholder="请输入关键字" v-model="keycode" @input="input" />
			<text style="font-size: .9rem;" @click="search1">搜索</text>
		</view>
		<view v-show="show" class=""
			style="background-color: white;border-radius: 18rpx;margin-top: 20rpx;padding: 18rpx;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 1.1rem;color: palevioletred;font-weight: bold;">猜你想搜</text>
				<text style="font-size: .9rem;color: #888;" @click="change">换一换</text>
			</view>
			<view class="" style="display: flex;flex-wrap: wrap">
				<view class="" v-for="(item,index) in guss" style="width: 50%;margin: 10rpx 0;"
					@click="search(item.keyword)">
					<text>{{item.keyword}}</text>
				</view>
			</view>
		</view>
		<view v-show="show" class=""
			style="background-color: white;border-radius: 18rpx;margin-top: 20rpx;padding: 18rpx;">
			<text style="font-size: 1.1rem;color: palevioletred;font-weight: bold;">搜索热点</text>
			<view class="" v-for="(item,index) in hot" style="margin: 24rpx 0;" @click="search(item.show_word)">
				<text style="color: hotpink;font-weight: bold;margin-right: 18rpx;">{{index+1}}</text>
				<text>{{item.show_word}}</text>
			</view>
		</view>
		<!-- reslt -->
		<view v-show="!show" class="">
			<view class="" v-for="item in result"
				style="margin: 20rpx 0;overflow: hidden;background-color: white;padding: 18rpx;border-radius: 18rpx;">
				<view class="" style="margin-bottom: 20rpx;">
					<text v-html="item.title" style="font-size: 1.1rem;"></text>
				</view>
				<text v-html="item.content"
					style="word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;"></text>
				<view class="" style="display: flex;margin-top: 20rpx;">
					<image lazy-load v-for="img in item.images" :src="img" mode="widthFix"
						style="width: 30%;margin-right: 10rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<image lazy-load v-if="item.publisher.avatar" :src="item.publisher.avatar" mode="widthFix"
						style="width: 50rpx;margin-right: 18rpx;border-radius: 50%;"></image>
					<text>{{item.publisher.screen_name}}</text>
					<view class="" style="flex: 1;text-align: right;">
						<text style="color: #888;font-size: .9rem;">{{item.published_date}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hot: Object,
				keycode: "",
				guss: Object,
				gussMore: Object,
				result: [],
				show: true
			};
		},
		onLoad() {
			uni.request({
				url: "/v2/search_suggest?from=2",
				method: "GET",
				header: {
					"myclient": "0830605000900000"
				},
				success: (res) => {
					this.hot = res.data.data.rank_list.words
					this.gussMore = res.data.data.give_words
					this.guss = this.getRandomArrayElements(res.data.data.give_words, 6)
				}
			}),
			uni.setNavigationBarTitle({
				title:"辣妈圈"
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index; //只是声明变量的方式, 也可以分开写
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random()); //这里的+1 是因为上面i--的操作  所以要加回来
					temp = shuffled[index]; //即值交换
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			},
			change() {
				this.guss = this.getRandomArrayElements(this.gussMore, 6)
			},
			search(keyword) {
				this.keycode = keyword
				this.getResult()
				this.show = false
			},
			input() {
				if (this.keycode.length == 0) {
					this.show = true
				}
			},
			search1(){
				if(this.keycode.length!=0){
				this.getResult()
				this.show = false
					
				}
			},
			getResult() {
				this.result = []
				uni.request({
					url: "https://circle.seeyouyima.com/v2/search?search_keyword=" + this.keycode +
						"&search_from=2&pos_id=1&current_tab=1&words_type=2&tab_have_changed=0&location=%E7%8C%9C%E4%BD%A0%E6%83%B3%E6%90%9C&mywtb_name=search-list&mywtb_loading=1&env=prod&bundleid=9&app_id=8&myclient=0830605000900000&myuid=536941041&open-person-ad=1&platform=android&v=6.0.5&tbuid=&mode=3&sdkversion=23&open-person-eb-recomm=1&resolution=720,1280&themeid=1&auth=7.fWIH1tcgD-198chp9YSRr9uKBQ2fdQ0spB00l9KqHFs",
					success: (res) => {
						this.result = res.data.data.docs[0].items
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.app {
		padding: 20rpx;
		background-color: var(--bgcolor);
		min-height: 100vh;
		margin-top: 80rpx;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		background-color: white;
		padding: 20rpx;
		box-sizing: border-box;
		z-index: 999;

		#search {
			background-color: whitesmoke;
			font-size: .9rem;
			padding: 10rpx 60rpx;
			position: relative;
			border-radius: 18rpx;
			width: 66%;

			&::before {
				content: "";
				display: block;
				background: url("../../static/img/搜索.png") no-repeat;
				background-size: 100%;
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				left: 18rpx;
				top: 12rpx;
			}
		}
	}
</style>